<template>
  <div class="left_box">
    <div class="tree_title">
      <div class="title">分类</div>
      <div>
        <Icon type="md-add" size="20" @click="addType" />
        <Icon type="md-refresh" size="20" @click="getList" />
      </div>
    </div>
    <div class="menu-box" v-loading="loading">
      <div class="menu-item" :class="{ select: item.id == props.modelValue }"
        v-for="(item, i) in agentTypeList" :key="i" @click="handleMenuClick(item)">
        <el-popover ref="popover" :width="50" trigger="contextmenu" placement="right">
          <template #reference>
            <span class="menu-item-title">{{ item.name }}</span>
          </template>
          <template #default>
            <Icon class="pointer" style="margin-right: 10px" type="ios-create-outline" size="24"
              @click="addType(item, i)" />
            <Icon class="pointer" type="md-trash" size="24" @click="removeType(item.id, i)" />
          </template>
        </el-popover>
      </div>
    </div>

    <AddTypeDialog ref="addTypeRef" @submit="getList" />
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, nextTick, watch } from 'vue'
import { getAgentTypeList, deleteAgentType } from '@/api/modules/agent'
import { myKnowledge } from '@/api/modules/knowledgeBase'

import AddTypeDialog from './AddTypeDialog.vue'

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: 0
  },
  title: {
    type: String,
    default: '分类'
  },
  menu: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['change', 'update:modelValue'])
const active = ref(undefined)
const { proxy } = getCurrentInstance()
const loading = ref(false)

const handleMenuClick = data => {
  // if( data.id === active ) return
  
  const val = data.id === props.modelValue ? undefined : data.id
  emit('update:modelValue', val)
  emit('change', val)
}

// 获取分类列表
const agentTypeList = ref([])
const getList = async () => {
  loading.value = true
  const { data } = await myKnowledge.typeList()
  agentTypeList.value = data
  loading.value = false
}

// 新增编辑分类
const addTypeRef = ref(null)
const popover = ref(null)

const addType = (row, index = undefined) => {
  if (index !== undefined) {
    popover.value[index].hide()
    addTypeRef.value?.init(row)
    return
  }
  addTypeRef.value?.init()
}

// 删除分类
const removeType = (id, index) => {
  popover.value[index].hide()
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: `<p>是否删除该分类?</p>`,
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await myKnowledge.typeDelete({
        data: { id }
      })
      proxy.$Message.success('确认移除')
      getList()
    }
  })
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.menu-box {
  padding-top: 20px;
  height: calc(100% - 50px);
  overflow-y: auto;
}
.menu-item {
  margin-bottom: 20px;
  cursor: pointer;
  &-title {
    font-size: 16px;
    margin-left: 10px;
  }
  &.select {
    font-weight: 600;
  }
}
</style>
